<template>
  <div v-if="currentEvent" class="event-modal-overlay" @click="handleOverlayClick">
    <div class="event-modal" :class="`event-${currentEvent.type}`" @click.stop>
      <div class="event-header">
        <div class="event-icon">
          {{ getEventIcon(currentEvent.type) }}
        </div>
        <div class="event-info">
          <h2 class="event-title">{{ currentEvent.title }}</h2>
          <div class="event-meta">
            <span class="event-type">{{ getEventTypeName(currentEvent.type) }}</span>
            <span class="event-time">{{ formatTime(currentEvent.timestamp) }}</span>
          </div>
        </div>
        <button @click="closeEvent" class="close-btn">
          <span class="close-icon">✕</span>
        </button>
      </div>
      
      <div class="event-content">
        <div class="event-description">
          {{ currentEvent.description }}
        </div>
        
        <div v-if="currentEvent.effects && currentEvent.effects.length > 0" class="event-effects">
          <h3 class="effects-title">影响:</h3>
          <ul class="effects-list">
            <li 
              v-for="effect in currentEvent.effects" 
              :key="effect.id"
              class="effect-item"
              :class="effect.type"
            >
              <span class="effect-icon">{{ getEffectIcon(effect.type) }}</span>
              <span class="effect-text">{{ effect.description }}</span>
              <span v-if="effect.value" class="effect-value">
                {{ effect.value > 0 ? '+' : '' }}{{ effect.value }}
              </span>
            </li>
          </ul>
        </div>
        
        <div v-if="currentEvent.choices && currentEvent.choices.length > 0" class="event-choices">
          <h3 class="choices-title">选择你的行动:</h3>
          <div class="choices-list">
            <button
              v-for="choice in currentEvent.choices"
              :key="choice.id"
              @click="makeChoice(choice)"
              class="choice-btn"
              :class="choice.type"
            >
              <span class="choice-icon">{{ choice.icon || '👆' }}</span>
              <div class="choice-content">
                <div class="choice-title">{{ choice.title }}</div>
                <div class="choice-description">{{ choice.description }}</div>
                <div v-if="choice.cost" class="choice-cost">
                  消耗: {{ formatCost(choice.cost) }}
                </div>
              </div>
            </button>
          </div>
        </div>
      </div>
      
      <div class="event-footer">
        <button v-if="!currentEvent.choices || currentEvent.choices.length === 0" 
                @click="acknowledgeEvent" 
                class="acknowledge-btn">
          <span class="btn-icon">✓</span>
          确认
        </button>
        <div class="event-priority" :class="`priority-${currentEvent.priority}`">
          {{ getPriorityName(currentEvent.priority) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useGameStore } from '@/stores/game'

interface EventEffect {
  id: string
  type: 'positive' | 'negative' | 'neutral'
  description: string
  value?: number
}

interface EventChoice {
  id: string
  title: string
  description: string
  icon?: string
  type: 'primary' | 'secondary' | 'danger'
  cost?: Record<string, number>
}

interface GameEvent {
  id: string
  title: string
  description: string
  type: 'discovery' | 'crisis' | 'opportunity' | 'diplomatic' | 'military' | 'economic'
  priority: 'low' | 'medium' | 'high' | 'critical'
  timestamp: number
  effects?: EventEffect[]
  choices?: EventChoice[]
}

const gameStore = useGameStore()

// 计算属性
const currentEvent = computed(() => {
  // 这里应该从游戏状态中获取当前事件
  // 暂时返回一个示例事件
  return gameStore.currentEvents[0] || null
})

// 方法
function getEventIcon(type: string): string {
  const icons = {
    discovery: '🔍',
    crisis: '⚠️',
    opportunity: '💡',
    diplomatic: '🤝',
    military: '⚔️',
    economic: '💰'
  }
  return icons[type as keyof typeof icons] || '📢'
}

function getEventTypeName(type: string): string {
  const names = {
    discovery: '发现',
    crisis: '危机',
    opportunity: '机遇',
    diplomatic: '外交',
    military: '军事',
    economic: '经济'
  }
  return names[type as keyof typeof names] || '事件'
}

function getPriorityName(priority: string): string {
  const names = {
    low: '低优先级',
    medium: '中优先级',
    high: '高优先级',
    critical: '紧急'
  }
  return names[priority as keyof typeof names] || '普通'
}

function getEffectIcon(type: string): string {
  const icons = {
    positive: '✅',
    negative: '❌',
    neutral: 'ℹ️'
  }
  return icons[type as keyof typeof icons] || 'ℹ️'
}

function formatTime(timestamp: number): string {
  const date = new Date(timestamp)
  return date.toLocaleTimeString()
}

function formatCost(cost: Record<string, number>): string {
  return Object.entries(cost)
    .map(([resource, amount]) => `${amount} ${resource}`)
    .join(', ')
}

function handleOverlayClick() {
  // 点击遮罩层时可以选择是否关闭
  if (currentEvent.value?.priority !== 'critical') {
    closeEvent()
  }
}

function closeEvent() {
  gameStore.dismissCurrentEvent()
}

function acknowledgeEvent() {
  gameStore.acknowledgeEvent(currentEvent.value!.id)
}

function makeChoice(choice: EventChoice) {
  gameStore.makeEventChoice(currentEvent.value!.id, choice.id)
}
</script>

<style scoped>
.event-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.event-modal {
  background: var(--bg-secondary);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6);
  border: 2px solid var(--border-color);
}

.event-modal.event-crisis {
  border-color: var(--error-color);
}

.event-modal.event-opportunity {
  border-color: var(--success-color);
}

.event-modal.event-discovery {
  border-color: var(--primary-color);
}

.event-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.event-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.event-info {
  flex: 1;
}

.event-title {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.event-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

.event-type {
  color: var(--primary-color);
  font-weight: 600;
}

.event-time {
  color: var(--text-secondary);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-hover);
  color: var(--error-color);
}

.close-icon {
  font-size: 1.2rem;
}

.event-content {
  padding: 1.5rem;
}

.event-description {
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.event-effects {
  margin-bottom: 1.5rem;
}

.effects-title {
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.effects-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.effect-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.effect-item:last-child {
  border-bottom: none;
}

.effect-icon {
  font-size: 1.1rem;
}

.effect-text {
  flex: 1;
  color: var(--text-primary);
}

.effect-value {
  font-weight: 600;
}

.effect-item.positive .effect-value {
  color: var(--success-color);
}

.effect-item.negative .effect-value {
  color: var(--error-color);
}

.event-choices {
  margin-bottom: 1rem;
}

.choices-title {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.choice-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}

.choice-btn.primary {
  border-color: var(--primary-color);
}

.choice-btn.danger {
  border-color: var(--error-color);
}

.choice-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.choice-content {
  flex: 1;
}

.choice-title {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.choice-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.choice-cost {
  color: var(--warning-color);
  font-size: 0.8rem;
  font-weight: 500;
}

.event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

.acknowledge-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: var(--bg-primary);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.acknowledge-btn:hover {
  background: var(--primary-hover);
}

.event-priority {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.priority-low {
  background: rgba(156, 163, 175, 0.2);
  color: var(--text-secondary);
}

.priority-medium {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning-color);
}

.priority-high {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error-color);
}

.priority-critical {
  background: var(--error-color);
  color: white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .event-modal {
    margin: 0.5rem;
    max-height: 90vh;
  }
  
  .event-header {
    padding: 1rem;
  }
  
  .event-content {
    padding: 1rem;
  }
  
  .event-footer {
    padding: 1rem;
  }
  
  .choice-btn {
    padding: 0.75rem;
  }
}
</style>